<!-- 课程班级 -->
<template>
	<view name="oil">
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">隔油池</block>
		</cu-custom>
		<view class="wrap" :style="{height: contentHeight + 'px'}">
			<view class="oil-status-height" v-if="colorInfo">
				<view class="st-item" v-if="false">
					<u--text text="当前状态："></u--text>
					<u--text text="规范"></u--text>
				</view>
				<view class="st-item">
					<u--text text="当前四色状态："></u--text>
					<u-line-progress percentage="100" :showText="false" height="12" v-if="colorInfo=='GREEN'" activeColor="#53c21d"></u-line-progress>
					<u-line-progress percentage="100" :showText="false" height="12" v-if="colorInfo=='YELLOW'" activeColor="#f1a532"></u-line-progress>
					<u-line-progress percentage="100" :showText="false" height="12" v-if="colorInfo=='RED'" activeColor="#e45656"></u-line-progress>
					<u-line-progress percentage="100" :showText="false" height="12" v-if="colorInfo=='GRAY'" activeColor="#909399"></u-line-progress>
				</view>
			</view>
			<view class="search-area" @click="searchOil">
				<u-icon name="search" color="#0081ff" size="28"></u-icon>
			</view>
			<mescroll-uni ref="mescrollRef" :top="top" bottom="100" @init="mescrollInit" @down="downCallback"  @up="upCallback" :up="upOption">
				<view class="page-box">
					<view class="order" v-for="(item, index) in dataList" :key="item.id" @click="detail(index)">
						<view class="top">
							<view class="left">
								<uni-text class="cuIcon-titles text-blue"></uni-text>
								<view class="store">{{ item.wvpShop.name }}</view>
								<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26" v-if="false"></u-icon>
							</view>
							<view class="right"></view>
						</view>
						<view class="item">
							<view class="left">
								<image :src="item.afterUploadImg" mode="aspectFill"></image>
							</view>
							<view class="content" style="width: 100%;">
								<view class="title u-line-2 text-bold">垃圾重量： {{item.weight}}{{merchant.orgCode == 'A05' ? 'KG' : '桶'}}</view>
								<view class="type">规范状态： {{item.status_dictText}}</view>
								<view class="fourcolor">
									<span class="txt">上报日期： {{item.createTime.substring(0, 10)}}</span>
								</view>
								<view class="delivery-time">记录人： {{ item.createBy_dictText }}</view>
							</view>
						</view>
						<u-line color="#f1f1f1" margin="24rpx 0 15rpx 0"></u-line>
						<view class="bottom">
							<view>
								<view class="cu-avatar-group" style="padding-left: 24rpx;">
									<view class="cu-avatar round"  :style="[{ backgroundImage:'url(' + item.beforeUploadImg + ')' }]"></view>
									<view class="cu-avatar round"  :style="[{ backgroundImage:'url(' + item.afterUploadImg + ')' }]"></view>
								</view>
								<text class="text-blue text-shadow">前后对比照片</text>
							</view>
							
							<view class="btnBox">
								<view class="evaluate btn">查看详情</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
			<view class="cu-tabbar-height"></view>
		</view>
		
		<!-- 加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://mini.wm-mis.com/img/static/car.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">加载中...</view>
		</view>
		<drag-button :isDock="true" :existTabBar="true" @btnClick="addClick" v-if="token" />
		<u-popup :show="oilShow" @close="closeOilCb" @open="openOilCb" mode="top" style="position: absolute;">
			<view style="padding: 36rpx 30rpx;">
				<u--text prefixIcon="search" iconStyle="font-size: 24px" margin="10px" size="18" text="高级搜索" align="center"></u--text>
				<u-gap height="15" bgColor="#ffffff"></u-gap>
				<u--form
						labelPosition="left"
						labelWidth="80"
						ref="uForm"
				>
					<u-form-item
							label="开始时间"
							prop="name"
							borderBottom
							ref="item1"
							@click="showStart = true"
					>
					    <u--text :text="startDateFormat"></u--text>
					</u-form-item>
					<u-form-item
							label="结束时间"
							prop="number"
							borderBottom
							@click="showEnd = true"
							ref="item2"
					>
						<u--text :text="endDateFormat"></u--text>
					</u-form-item>
				</u--form>
				<u-gap height="30" bgColor="#ffffff"></u-gap>
				<u-button type="primary" @click="submitSearchOil">搜索</u-button>
				<u-gap height="15" bgColor="#ffffff"></u-gap>
			</view>
		</u-popup>
		<u-datetime-picker mode="date":closeOnClickOverlay="true" :show="showStart" v-model="startDate" @confirm="closeStartDate" @close="closeStartDate" @cancel="closeStartDate"></u-datetime-picker>
		<u-datetime-picker mode="date":closeOnClickOverlay="true" :show="showEnd" v-model="endDate" @confirm="closeEndDate" @close="closeEndDate" @cancel="closeEndDate"></u-datetime-picker>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import DragButton from '@/components/drag-button/Index.vue';
	import moment from 'moment';
	import {
		mapState
	} from 'vuex';
	import api from '@/api/api'
	import configService from '@/common/service/config.service.js';
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				colorInfo: '',
				contentHeight: this.ScreenHeight - this.CustomBar,
				upOption:{
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore: '我是有底线的',
					empty: {
						tip: '~ 暂无数据 ~'
					}
				},
				dataList: [],
				loading: false,
				oilShow: false,
				startDate: (new Date()).getTime() - 30 * 24 * 60 * 60 * 1000,
				endDate: (new Date()).getTime(),
				showStart: false,
				showEnd: false
			};
		},
		components:{
			DragButton
		},
		computed: {
			...mapState([
				'merchant',
				'token'
			]),
			top() {
				if(this.colorInfo){
					return this.CustomBar * 2 + 100
				}
				else{
					return this.CustomBar * 2
				}
			},
			startDateFormat(){
				return moment(Number(this.startDate)).format('YYYY-MM-DD');
			},
			endDateFormat(){
				return moment(Number(this.endDate)).format('YYYY-MM-DD');
			}
		},
		methods: {
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调, 重置列表为第一页*/
			downCallback(){
				this.dataList = [];
				this.mescroll.resetUpScroll(); // 重置列表数据 (内部会自动page.num=1,再主动触发up.callback)
			},
			async upCallback(page) {
				let that = this;
				that.loading = true
				let res = await api.oilListNoAuth({
					fkShopId: that.merchant.id,
					pageSize: page.size,
					pageNo: page.num,
					start: that.startDateFormat + ' 00:00:00',
					end: that.endDateFormat + ' 23:59:59'
				})
				if(res.data.code == 200 && res.data.success){
					that.loading = false
					if(page.num == 1){
						that.dataList = []; //如果是第一页需手动制空列表
					}
					
					//列表
					for(let item of res.data.result.records){
						if(item.afterUpload){
							item.afterUploadImg = configService.apiUrl + '/sys/common/static/' + item.afterUpload;
						}
						else{
							item.afterUploadImg = 'https://mini.wm-mis.com/img/static/pic_placeholder.png';
						}
						
						if(item.beforeUpload){
							item.beforeUploadImg = configService.apiUrl + '/sys/common/static/' + item.beforeUpload;
						}
						else{
							item.beforeUploadImg = 'https://mini.wm-mis.com/img/static/pic_placeholder.png';
						}
						
						that.dataList.push(item);
					}
					let hasNext = true;
					if(res.data.result.pages <= res.data.result.current){
						hasNext = false;
					}
					
					let dataSize = that.dataList.length;
					that.mescroll.endSuccess(dataSize, hasNext);//新数据条数
				}
				else{
					//联网失败, 结束加载
					that.mescroll.endErr();
					that.loading = false
				}
			},
			addClick(){
				uni.navigateTo({
					url: '/pages/oil/add'
				})
			},
			detail(index){
				let item = this.dataList[index];
				uni.navigateTo({
					url: '/pages/oil/add?id=' + item.id
				})
			},
			async getStatus(){
				let that = this
				if(that.merchant && that.merchant.id){
					let res = await api.oilStatus({
						shopid: that.merchant.id
					})
					if(res.data.code == 200 && res.data.success){
						that.colorInfo = res.data.result
					}
				}
			},
			searchOil(){
				this.oilShow = true
			},
			openOilCb() {},
			closeOilCb() {
				this.oilShow = false
			},
			submitSearchOil(){
				this.oilShow = false
				this.dataList = [];
				this.mescroll.resetUpScroll();
			},
			closeStartDate(value){
				this.showStart = false;
			},
			closeEndDate(value){
				this.showEnd = false;
			}
		},
		async mounted() {
			this.startDate = (new Date()).getTime() - 30 * 24 * 60 * 60 * 1000;
			await this.getStatus()
		}
	};
</script>

<style lang="scss" scoped>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
	
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}
		.right {
			color: $u-warning-dark;
			.progressBox{
				width: 150rpx;
				float: right;
			}
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			image {
				width: 260rpx;
				height: 190rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 30rpx;
				line-height: 45rpx;
			}
			.type {
				margin: 8rpx 0;
				font-size: 28rpx;
				color: $u-tips-color;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				line-clamp: 3;
				-webkit-box-orient: vertical;
			}
			.delivery-time {
				color: #0081ff;
				font-size: 28rpx;
			}
			.fourcolor{
				margin: 8rpx 0;
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				.txt{
					font-size: 28rpx;
					color: $u-tips-color;
				}
			}
		}
		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		line-height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btnBox{
			width: 150rpx;
			display: flex;
			justify-content: space-between;
			.btn {
				line-height: 52rpx;
				width: 140rpx;
				border-radius: 12rpx;
				border: 2rpx solid $u-tips-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-tips-color;
			}
			.evaluate {
				color: $u-primary;
				border-color: $u-primary;
			}
		}
	}
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
	image {
		width: 300rpx;
		border-radius: 50%;
		margin: 0 auto;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
	position: relative;
	.oil-status-height{
		display: flex; 
		flex-direction: row; 
		align-items: center;
		padding: 30rpx;
		background: white;
		height: 100rpx;
		box-sizing: border-box;
		z-index: 9;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
		.st-item{
			display: flex;
			flex-direction: row; 
			align-items: center;
			justify-content: center;
			flex: 1;
		}
	}
	.search-area{
		position: absolute;
		right: 0rpx;
		top: 150rpx;
		background-color: white;
		z-index: 9;
		width: 100rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: -10rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
		border-top-left-radius: 50%;
		border-bottom-left-radius: 50%;
	}
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>

